<template>
  <div>
      <public-header></public-header>
      <div class="body-content">
         <ul class="item">
              <li
                  v-for="item of list"
                  v-bind:key="item.id"
              >
                  <img class="item-img" :src="item.image">
                  <div class="item-content">
                      <div class="content-top">
                          <router-link
                                  :to="'/news/detail?id='+ item.id"
                          >
                          {{item.title}}
                          </router-link>
                      </div>
                      <div class="content-next"><a> {{item.user ? item.user.name : '无名' }}</a> {{item.create_time}} | <a>{{item.views}}次查看</a></div>
                  </div>
              </li>
          </ul>
          <app-pagination
                v-bind:pages="pages"
                @getPageData="handleGetPageData"
          >
          </app-pagination>
      </div>
      <public-footer></public-footer>
  </div>
</template>

<script>
import PublicHeader from '../Public/PublicHeader'
import PublicFooter from '../Public/PublicFooter'
import PublicContent from '../Public/PublicContent'
import AppPagination from '../Global/AppPagination'

import httpA from '../../http_axios'

export default {
  name: 'NewsList',
  data () {
    return {
      list: [],
      pages: {
        size: 5,
        total: 50,
        currentPage: 1,
        prevPage: 1,
        lastPage: 1
      }
    }
  },
  components: {
    PublicContent,
    PublicHeader,
    PublicFooter,
    AppPagination
  },
  methods: {
    getNewListHandle: function () {
      httpA.get('http://www.laravel.com/api/v1/articles', {
        params: {
          'page': this.pages.currentPage
        },
        headers: {
          'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiIsImp0aSI6IjZhZmJiNzNhZTUyZTczMzJiNTE1OWJkZjliMmZlNWVjNjAzY2ZiNWExZjY0ZTlmMmRkZGMyM2FkN2QwMDc4MjExNjhiMTQ3ODUwYzhhZjhkIn0.eyJhdWQiOiIxIiwianRpIjoiNmFmYmI3M2FlNTJlNzMzMmI1MTU5YmRmOWIyZmU1ZWM2MDNjZmI1YTFmNjRlOWYyZGRkYzIzYWQ3ZDAwNzgyMTE2OGIxNDc4NTBjOGFmOGQiLCJpYXQiOjE1MzUwNzQzODUsIm5iZiI6MTUzNTA3NDM4NSwiZXhwIjoxNTY2NjEwMzg1LCJzdWIiOiIyOSIsInNjb3BlcyI6W119.HboOWdUZD-Ga-POheXXJMRblpuAOTJy4xHo_sb2Ljpbuwzay4BofiAPwF2_rJlMk005n_PlZIlUXy_cXTfBcdVQxP5DtZO0eo_gE8VWP2kXskwlvsfC26BcHFAdKWiUorfT50XPmLbdwWZO637lNOFT8Ux4fV1ArQyCGfsRlO6X1v22oafeEafiCF3jSZ1ZSCgbBpcL_DttAw1LgXM8PMJ_ld9GyvZA60HpHVoSloRrU4nTfXlr6g09Qmw880ziU3NJnbhMG06ZdvvMHEi8_CD-oPIfUyuSyY1qfhKRZnUeV-KAB42v2IbpoOUawcgd2y_KtFdiyu2ljg4uC5jbyM74jvVowU-qzh736vvDtxiuJYSR1td6LF0mf46fZ5kp_EwpTmbT0b4zkD9mMu8ZQQF-9MGzI1jFFTtCb03mfQ2u2Wgr_Rz_8WWxV-WOlTp_VdRBCQ-cBS7C8xaoW8xzXXU-xrw_4rX0lgvQ9pacd5zQ4OzK9HYo9i5gRO_mZsfH_COAwiyPu3k7Z4S8fjX4PypWwKiLv_BvR848zYVyzo1J0M75WwRzQiiC3y1MbwgeATabLX5vhve6oHt7biEZMbzTwFilcHFsYMIbPubMTUU8OSyouXnsdLAIfQ-ihrwliwJErj3PWKdSbGq2bLSx2VDddnArLFEdRhS--y4cLlK8'
        }
      })
        .then(response => {
          if (response.data.code === 200) {
            let info = response.data
            let getPage = info.meta
            console.log(getPage)
            this.pages.size = getPage.page_size
            this.pages.lastPage = getPage.last_page
            this.pages.total = getPage.total
            this.pages.currentPage = getPage.current_page
            this.list = info.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleGetPageData (val) {
      console.log('-------' + val)
      this.pages.currentPage = val
    }
  },
  watch: {
    currentPage: function () {
      this.getNewListHandle()
    }
  },
  beforeMount () {
    this.isShow = true
  },
  mounted () {
    this.getNewListHandle()
  },
  computed: {
    currentSize () {
      return this.list.length
    },
    currentPage () {
      return this.pages.currentPage
    }
  }
}
</script>

<style scoped>
    .body-content {
        margin-top: 0px;
        width: auto;
        min-height: 300px;
        height: auto;
    }
    .item {
        height: auto;
    }
    .item >li {
        list-style: none;
        border-bottom: 1px solid #eee;
        height: 80px;
        margin: 10px;
        padding: 15px;
        /*background-color: #7d7d7d;*/
        /*border: 2px solid red;*/
    }
    .item-img {
        /*display: inline-block;*/
        float: left;
        height: 64px;
        width: 64px;
        line-height: 80px;
    }
    .item-content{
        /*display: inline-block;*/
        float: left;
        padding-left: 20px;
    }
    .content-top{
        /*display: block;*/
        /*float: left;*/
        line-height: 32px;
    }
    .content-next{
        line-height: 22px;
    }
    .content-top a{
        color:#009a61;
        cursor: pointer;
    }
    .content-top a:hover {
        text-decoration:underline;
    }
</style>
